/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #FF6B35; // 活力橙（主色）
$uni-color-success: #4cd964;
$uni-color-warning: #FFD166; // 能量黄（强调）
$uni-color-error: #dd524d;

/* 活力主题扩展色 - 暖色调优化 */
$theme-orange: #FF7E29;        // 活力橙（更温暖）
$theme-coral: #FF6B6B;         // 珊瑚红（温馨感）
$theme-blue: #4A90E2;          // 科技蓝（更柔和）
$theme-green: #6DD400;         // 新生绿（健康感）
$theme-yellow: #FFD166;        // 能量黄（温暖感）
$theme-purple: #9D4EDD;        // 优雅紫（高级感）
$theme-deep-gray: #2D3047;     // 深空灰（稳重感）
$theme-bg: #FEF7F0;            // 暖白背景（更温馨）
$theme-card: #FFFFFF;          // 亮白（纯白）
$theme-warm-gray: #F5F3F0;     // 暖灰色（辅助背景）

/* 渐变变量 - 暖色调优化 */
$grad-sunrise: linear-gradient(135deg, #FF7E29 0%, #FFD166 100%);
$grad-coral: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
$grad-ocean: linear-gradient(135deg, #4A90E2 0%, #6DD400 100%);
$grad-health: linear-gradient(135deg, #6DD400 0%, #4A90E2 100%);
$grad-energy: linear-gradient(135deg, #FF7E29 0%, #9D4EDD 100%);
$grad-warm: linear-gradient(135deg, #FF7E29 0%, #FF6B6B 100%);
$grad-elegant: linear-gradient(135deg, #9D4EDD 0%, #4A90E2 100%);

/* 通用动效类 - 增强版 */
.pressable{transition:all 200ms ease-out}
.pressable:active{transform:scale(.95)}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.breath{animation:breath 3s ease-in-out infinite}
@keyframes breath{0%{opacity:.85}50%{opacity:1}100%{opacity:.85}}

/* 新增动效类 */
.bounce{animation:bounce 0.6s ease-in-out}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-10rpx)}60%{transform:translateY(-5rpx)}}

.fade-in{animation:fadeIn 0.5s ease-out}
@keyframes fadeIn{0%{opacity:0;transform:translateY(20rpx)}100%{opacity:1;transform:translateY(0)}}

.slide-up{animation:slideUp 0.4s ease-out}
@keyframes slideUp{0%{transform:translateY(40rpx);opacity:0}100%{transform:translateY(0);opacity:1}}

.scale-in{animation:scaleIn 0.3s ease-out}
@keyframes scaleIn{0%{transform:scale(0.8);opacity:0}100%{transform:scale(1);opacity:1}}

.glow{animation:glow 2s ease-in-out infinite alternate}
@keyframes glow{0%{box-shadow:0 0 20rpx rgba(255,126,41,0.3)}100%{box-shadow:0 0 30rpx rgba(255,126,41,0.6)}}

/* 交互反馈动效 */
.interactive{transition:all 0.2s ease}
.interactive:hover{transform:translateY(-2rpx);box-shadow:0 8rpx 25rpx rgba(0,0,0,0.15)}
.interactive:active{transform:translateY(0);box-shadow:0 4rpx 15rpx rgba(0,0,0,0.1)}

/* 颜色渐变动效 */
.color-shift{transition:background 0.3s ease,color 0.3s ease}
.color-shift:hover{background:linear-gradient(135deg,#FF7E29,#FF6B6B);color:#fff}

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;

/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;

/* 适老化设计系统 */
/* 高对比度色彩 - 确保对比度≥4.5:1 */
$elderly-text-primary: #1A1C2E;    // 主要文字 - 高对比度
$elderly-text-secondary: #4B5563;  // 次要文字 - 提高可读性
$elderly-text-disabled: #9CA3AF;   // 禁用文字
$elderly-bg-primary: #FFFFFF;      // 主要背景
$elderly-bg-secondary: #F9FAFB;    // 次要背景
$elderly-border: #D1D5DB;          // 边框 - 增强可见性

/* 适老化字体系统 - 最小28rpx */
$elderly-font-xs: 24rpx;           // 最小字体
$elderly-font-sm: 28rpx;           // 小字体 - 适老化标准
$elderly-font-base: 32rpx;         // 基础字体 - 适老化标准
$elderly-font-lg: 36rpx;           // 大字体 - 重要信息
$elderly-font-xl: 40rpx;           // 特大字体 - 标题
$elderly-font-xxl: 48rpx;          // 超大字体 - 重要标题

/* 适老化触摸目标尺寸 - 最小88rpx */
$elderly-touch-xs: 64rpx;          // 小触摸目标
$elderly-touch-sm: 88rpx;          // 最小触摸目标 - 适老化标准
$elderly-touch-base: 100rpx;       // 基础触摸目标
$elderly-touch-lg: 120rpx;         // 大触摸目标 - 重要按钮
$elderly-touch-xl: 160rpx;         // 特大触摸目标 - 紧急按钮

/* 适老化间距系统 */
$elderly-spacing-xs: 8rpx;         // 最小间距
$elderly-spacing-sm: 16rpx;        // 小间距
$elderly-spacing-base: 24rpx;      // 基础间距
$elderly-spacing-lg: 32rpx;        // 大间距
$elderly-spacing-xl: 48rpx;        // 特大间距

/* 适老化圆角系统 */
$elderly-radius-sm: 8rpx;          // 小圆角
$elderly-radius-base: 16rpx;       // 基础圆角
$elderly-radius-lg: 24rpx;         // 大圆角
$elderly-radius-xl: 32rpx;         // 特大圆角

/* 适老化阴影系统 */
$elderly-shadow-sm: 0 2rpx 8rpx rgba(0,0,0,0.08);
$elderly-shadow-base: 0 4rpx 16rpx rgba(0,0,0,0.12);
$elderly-shadow-lg: 0 8rpx 32rpx rgba(0,0,0,0.16);

/* 适老化交互类 */
.elderly-pressable {
  transition: all 0.2s ease;
  min-height: $elderly-touch-sm;
  min-width: $elderly-touch-sm;
}
.elderly-pressable:active {
  transform: scale(0.96);
  background-color: rgba(0,0,0,0.05);
}

.elderly-button {
  font-size: $elderly-font-base;
  min-height: $elderly-touch-lg;
  min-width: $elderly-touch-lg;
  border-radius: $elderly-radius-base;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 1rpx;
}

.elderly-text {
  font-size: $elderly-font-base;
  line-height: 1.6;
  color: $elderly-text-primary;
}

.elderly-text-large {
  font-size: $elderly-font-lg;
  line-height: 1.5;
  color: $elderly-text-primary;
  font-weight: 600;
}
